<template>
	<ls-page title="">
		<view class="card-item" v-for="(item, index) in carduserInfo" :key="index">
			<view :class="'center-main-card ' + (item.cardType == '2' ? 'card-store' : 'card-brand')"
				:style="'background-image: url(' + item.backgroundAtt2 + ');'">
				<view class="main-card-upper">
					<view class="card-left">
						<image class="card-image" :src="shopInfo.orgLogo" mode="aspectFill" />
						<view class="card-center">
							<view class="card-center-title">
								<view class="carName">
									<view :class="item.carName.length > 9 ? 'ani' : ''">
										{{ item.carName }}
									</view>
								</view>
								<!-- <text class="not-opened" wx:if="{{ item.cardType == '2' && item.memberIsPayCard == '0'}}" bindtap="PayMemberUp" data-userinfo="{{item}}">升级权益</text> -->
							<!-- 	<text class="opened"
									v-if="item.cardType == '2' && item.memberIsPayCard == '1'">权益会员</text> -->
							</view>
							<view class="card-center-value">NO.{{ item.code }}</view>
							<view class="card-equity" v-if="item.cardType == '2' && item.memberIsPayCard == '0'">
								<text>权益内容：</text>
								<view @click="showDesc">?</view>
								<view class="up-desc" v-show="!upDesc">
									<view class="up-desc-main">
										{{ item.upCardRemark }}
									</view>
								</view>
							</view>
							<view class="card-equity-vip" v-if="item.cardType == '2' && item.memberIsPayCard == '1'">
								<view class="cardDate">
									<view>权益卡到期时间：{{ dayjs(item.payCardExpireDate).format('YYYY-MM-DD HH:mm:ss') }}</view>
								</view>
								<!-- <view @click="PayMemberUp" :data-userinfo="item" class="cardPay">续费</view> -->
							</view>
						</view>
					</view>
					<view class="card-right">
						<view class="card-code" @click="toCode"></view>
					</view>
				</view>
				<view class="main-card-below">
					<view class="card-below-item" @click="gotoCardDetail(1)">
						<view class="below-item-value">{{ item.currentAmtAct }}</view>
						<view class="below-item-title">余额(元)</view>
					</view>
					<view class="card-below-item" @click="gotoCardDetail(2)">
						<view class="below-item-value">{{ item.ticketCount }}</view>
						<view class="below-item-title">优惠券</view>
					</view>
					<view class="card-below-item" @click="gotoCardDetail(3)">
						<view class="below-item-value">{{ item.currentCoins }}</view>
						<view class="below-item-title">金币</view>
					</view>
					<view class="card-below-item" @click="gotoCardDetail(4)">
						<view class="below-item-value">{{ item.currentPoint }}</view>
						<view class="below-item-title">积分</view>
					</view>
				</view>
			</view>

			<view class="card-allow-main">
				<view class="allow-main-right">默认</view>
				<view class="allow-main-left">
					<up-switch :disabled="carduserInfo.length === 1"  v-model="item.checked" size="15" activeColor="#212121" inactiveColor="#CCCCCC"
						@change="onChange(item,$event)">
					</up-switch>
				</view>
			</view>
		</view>
                 <!-- 立即升级 - 会员权益 -->
	</ls-page>
</template>

<script setup>
	import { ref } from 'vue';
	import dayjs from 'dayjs'
	import { onLoad, onUnload, onShow, onHide } from '@dcloudio/uni-app';
	import { HFiveAppObjProcess, HFiveMemberAppObjProcess } from '@/api/public.js'


	const shopInfo = uni.getStorageSync('shopInfo') //门店信息
	const userInfo = uni.getStorageSync('userInfo') //用户信息
	const cardInfo = uni.getStorageSync('cardInfo') //会员卡信息
	// -------------------------------------------------------初始化数据-----------------------------------------------------
	const carduserInfo = ref([])

	const cardIndex = ref('0')
	const cardItem = ref(["品牌卡", "门店卡1"])
	const mobile = ref('')
	const upDesc = ref(true)
	// -------------------------------------------------------初始化数据-----------------------------------------------------

	onLoad((options) => {
		getUserInfo()
	})

	const gotoCardDetail = (type) => {
		if (type == 1) {
			uni.navigateTo({
				url: '/subpkg/view/transRecords/transRecords'
			})
		} else if (type == 2) {
			uni.switchTab({
				url: '/pages/coupon/index'
			})
		} else if (type == 3) {
			uni.navigateTo({
				url: '/subpkg/view/coldcoinDetai/coldcoinDetai'
			})
		} else if (type == 4) {
			uni.navigateTo({
				url: '/subpkg/view/pointsDetail/pointsDetail'
			})
		}
	}

	//跳转付款码	
	const toCode = () => {
		uni.navigateTo({
			url: '/subpkg/view/PaymentCode/PaymentCode'
		})
	}

	const getUserInfo = () => {
		mobile.value = userInfo.mobile;
		// 获取会员信息 1111
		HFiveMemberAppObjProcess({
			functionName: "MemberInfo_H5",
			contentData: "",
		}).then((res) => {
			uni.setStorageSync('cardInfo', res[0])

			let arr = []

			res.forEach((item, index) => {
				if (item.cardType == 1) {
					arr.push('品牌卡')
				} else {
					arr.push('门店卡')
				}

			})

			res.forEach((item, index) => {
				if (index === 0) {
					item.checked = true;
				} else {
					item.checked = false;
				}
			})

			cardItem.value = arr

			let data = res;
			data.forEach(item => {
				item.payCardExpireDate = dayjs(item.payCardExpireDate).format("YYYY-MM-DD");
			});

			carduserInfo.value = data

			const changeRes = res[0];

			userInfo.attachment = changeRes.attachment
			userInfo.mobile = changeRes.mobile;
			userInfo.name = changeRes.name;
			userInfo.sex = changeRes.sex;
			userInfo.currentAmtAct = changeRes.currentAmtAct; // 余额
			userInfo.ticketCount = changeRes.ticketCount; // 优惠券
			userInfo.currentCoins = changeRes.currentCoins; // 金币
			userInfo.currentPoint = changeRes.currentPoint; // 积分
			userInfo.carCode = changeRes.carCode; // 会员卡类型编号
			userInfo.code = changeRes.code; // 会员卡编号

			uni.setStorageSync('userInfo', userInfo)
		});

	}


	const PayMemberUp = () => {

	}


	const UpdateLeve = (obj) => {
		HFiveMemberAppObjProcess({
			functionName: "UpdateMemberLevel_H5",
			contentData: {
				tradeNo: obj.detail.tradeNo,
				cardNo: obj.detail.cardNo
			}
		}).then((res) => {
			getUserInfo();
			uni.showToast({
				title: res,
				icon: "none",
				duration: 2000,
			});
		});
	}

	// 切换默认会员卡
	const onChange = (v, e) => {
		if (e) {
			uni.showModal({
				title: '提示',
				content: '是否切换默认会员卡？',
				success: (res) => {
					if (res.confirm) {
						const stauts = e ? "1" : "0"
						HFiveMemberAppObjProcess({
							functionName: "UpdateCardDefault_H5",
							contentData: { "cardNo": v.code, "isDefault": stauts },
						}).then((res) => {
							HFiveMemberAppObjProcess({
								functionName: "MemberInfo_H5",
								contentData: "",
							}).then((r) => {
								r.forEach((item, index) => {
									if (item.code == v.code) {
										item.checked = true;
									} else {
										item.checked = false;
									}
								})
								carduserInfo.value = r

							});

						})
					}
				}
			})
		}
	}

	const showDesc = () => {
		upDesc.value = false
		setTimeout(() => {
			upDesc.value = true
		}, 2000); // 2秒后隐藏提示
	}
</script>

<style lang="scss" scoped>
	.card-item {
		padding: 20rpx 20rpx;

		.card-brand {
			background-image: url('https://oss.jtmckj.com/wmp/kbq/center/i_card_brand.png');
			background-repeat: no-repeat;
			background-size: cover;
		}

		.card-store {
			background-image: url('https://oss.jtmckj.com/wmp/kbq/center/i_card_store.png');
			background-repeat: no-repeat;
			background-size: cover;
		}

		.center-main-card {
		padding: 2rpx 2rpx 0 0rpx;
			margin-bottom: 5rpx;
			background-repeat: no-repeat;
			background-size: 100% 100%;
			border-radius: 16rpx;

			.main-card-upper {
				display: flex;
				align-items: flex-start;
				justify-content: space-between;
				/* padding-bottom: 62rpx;*/
				height: 174rpx;

				.card-left {
					display: flex;
					align-items: flex-start;
					padding-left: 32rpx;
					padding-top: 32rpx;

					.card-image {
						width: 80rpx;
						height: 80rpx;
						/* background-image: url("https://oss.jtmckj.com/wmp/kbq/center/i_icon_logo.png");*/
						/* background-repeat: no-repeat;*/
						/* background-size: cover;*/
						margin-right: 16rpx;
						border-radius: 12rpx;
					}

					.card-center {
						.card-equity {
							display: flex;
							align-items: center;
							margin-top: 10rpx;
							position: relative;

							text {
								color: var(--maincolorf4);
								font-size: 26rpx;
							}

							view {
								/* margin-left: 10rpx;*/
								color: var(--maincolorf1);
								font-size: 22rpx;
								width: 30rpx;
								height: 30rpx;
								background-color: var(--maincolor);
								text-align: center;
								border-radius: 50%;
							}

							.up-desc {
								position: absolute;
								width: 300rpx;
								height: 112rpx;
								bottom: 20rpx;
								right: -180rpx;
								z-index: 990;
								background-image: url('https://oss.jtmckj.com/wmp/kbq/common/i_back_tip.png');
								background-repeat: no-repeat;
								background-size: cover;
								text-align: left;
								padding: 24rpx;
								border-radius: 0;
								background-color: transparent;

								.up-desc-main {
									font-family: PingFang SC;
									font-weight: 500;
									font-size: 24rpx;
									color: #666666;
									line-height: 36rpx;
									display: -webkit-box;
									/* 使用弹性盒子布局 */
									-webkit-box-orient: vertical;
									/* 垂直方向排列 */
									-webkit-line-clamp: 3;
									/* 限制为三行 */
									overflow: hidden;
									/* 隐藏超出部分 */
									text-overflow: ellipsis;
									/* 显示省略号 */
									max-height: 108rpx;
									/* 最大高度，3行 * 行高 */
									border-radius: 0;
									background-color: transparent;
									width: 300rpx;
									height: 108rpx;
								}
							}
						}

						.card-equity-vip {
							display: flex;
							align-items: center;
							margin-top: 10rpx;

							.cardDate {
								width: 85%;
								height: 34rpx;
								position: relative;
								// overflow: hidden;

								view{
								  color: #fff;
								  font-size: 26rpx;
								  position: absolute;
								  white-space: nowrap; /* 禁止文本换行 */
								  animation: dateScroll 5s linear infinite;
								}
								@keyframes dateScroll {
								  0% {
									transform: translateX(5%);
								  }
								  100% {
									transform: translateX(-60%);
								  }
								}
							}

							.cardPay {
								color: #af0000;
								font-size: 26rpx;
								margin-left: 10rpx;
							}
						}

						.card-center-title {
							font-family: PingFang SC;
							font-weight: bold;
							font-size: 32rpx;
							line-height: 32rpx;
							padding-bottom: 16rpx;
							display: flex;
							align-items: center;

							.carName {
								width: 290rpx;
								height: 32rpx;
								position: relative;
								overflow: hidden;
								/* 隐藏超出部分的内容 */
								color: var(--maincolor);

								.ani {
									position: absolute;
									white-space: nowrap;
									/* 禁止文本换行 */
									animation: scroll 5s linear infinite;
									color: var(--maincolor);
								}

								@keyframes scroll {
									0% {
										transform: translateX(5%);
									}

									100% {
										transform: translateX(-60%);
									}
								}
							}

							.opened {
								margin-left: 10rpx;
								font-size: 24rpx;
								color: #fffde5;
								padding: 0 14rpx;
								background: linear-gradient(to left, #990000, #ff4000);
								border-radius: 60rpx;
							}
						}

						.card-center-value {
							font-family: PingFang SC;
							font-weight: 500;
							font-size: 24rpx;
							color: var(--maincolorf2);
							line-height: 24rpx;
						}
					}
				}

				.card-right {
					padding: 1rpx 1rpx 0 0;

					.card-code {
						width: 112rpx;
						height: 112rpx;
						background-image: url('https://oss.jtmckj.com/wmp/kbq/center/i_icon_code.png');
						background-repeat: no-repeat;
						background-size: cover;
					}

					.card-code2 {
						background-image: url('https://oss.jtmckj.com/wmp/kbq/center/i_icon_code.png');
					}
				}
			}

			.main-card-below {
				margin-top: 50rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				text-align: center;
				// padding: 0 14px;
				padding-left: 30rpx;
                text-align: center;
				.card-below-item {
					flex: 1;

					.below-item-value {
						width: 130rpx;
						font-family: PingFang SC;
						font-weight: bold;
						font-size: 32rpx;
						color: var(--maincolor);
						line-height: 32rpx;
						padding-bottom: 16rpx;
						margin-bottom: 15rpx;
						border-bottom: 3rpx solid  var(--dt-bordercolorPink);
					}

					.below-item-title {
						width: 130rpx;
						padding-bottom: 39rpx;
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 26rpx;
						color: var(--maincolorf4);
						line-height: 26rpx;
					}
				}
			}
		}

		.center-main-card2 {
			background-image: url('https://oss.jtmckj.com/wmp/kbq/center/i_card_brand.png');
		}

		.cardList {
			display: flex;
			align-items: center;

			.act {
				margin-right: 40rpx;
				margin-bottom: 30rpx;

				.text {
					color: var(--maincolorf1);
					margin-bottom: 10rpx;
				}

				.line {
					width: 40rpx;
					height: 2rpx;
					margin: auto;
					background-color: var(--maincolor);
				}
			}

			.cardItem {
				margin-right: 40rpx;
				margin-bottom: 30rpx;

				.text {
					color: var(--maincolorf2);
					margin-bottom: 10rpx;
				}

				.line {
					width: 40rpx;
					height: 2rpx;
					margin: auto;
				}
			}
		}
	}

	.card-allow-main {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		margin-top: 22rpx;

		.allow-main-right {
			font-family: PingFang SC;
			font-weight: 400;
			font-size: 26rpx;
			color: var(--maincolorf2);
			/* line-height: 26rpx;*/
			margin-right: 10rpx;
		}

		.allow-main-left {
			font-size: 12px;
		}
	}
</style>